<template>
  <div class="orderList">
    <i-tabs :current="current" color="#c78550" @change="handleChange">
      <i-tab key="0" title="全部">
      </i-tab>
      <i-tab key="1" title="待付款">
      </i-tab>
      <i-tab key="2" title="待发货">
      </i-tab>
      <i-tab key="3" title="待收货">
      </i-tab>
      <i-tab key="4" title="待评价">
      </i-tab>
    </i-tabs>
    <ul>
      <li class="orderInfo">
        <div class="orderHeader">
          <div class="headerLeft">订单已取消</div>
          <div class="headerRight">2018-10-4 12:02:24</div>
        </div>
        <div class="orderBody" @click="goOrderDetails">
          <img mode="aspectFit" src="../../../static/mine/book.jpg" alt="">
          <div class="info">
            <div class="bookName">平视姚明</div>
            <div class="authorName">
              <span>王猛</span>
              <span class="num">x1</span>
            </div>
            <div class="pri">
              <span>￥30.10</span>
              &nbsp;
              <span>原价60.20</span>
            </div>
          </div>
        </div>
        <div class="orderFooter">
          <button class="default" size="mini" hover-class="none">联系客服</button>
          <button class="default" size="mini" hover-class="none" @click="cancelOrder">取消订单</button>
          <!-- <button class='warn' size="mini" hover-class="none">确认收货</button> -->
          <button class='warn' size="mini" hover-class="none" @click="evaluate">去评价</button>
          <!-- <button class='warn' size="mini" hover-class="none">付款</button> -->
        </div>
      </li>
      <li class="orderInfo">
        <div class="orderHeader">
          <div class="headerLeft">订单已取消</div>
          <div class="headerRight">2018-10-4 12:02:24</div>
        </div>
        <div class="orderBody">
          <img mode="aspectFit" src="../../../static/mine/book.jpg" alt="">
          <div class="info">
            <div class="bookName">平视姚明</div>
            <div class="authorName">
              <span>王猛</span>
              <span class="num">x1</span>
            </div>
            <div class="pri">
              <span>￥30.10</span>
              &nbsp;
              <span>原价60.20</span>
            </div>
          </div>
        </div>
        <div class="orderFooter">
          <button class="default" size="mini" hover-class="none">联系客服</button>
          <button class="default" size="mini" hover-class="none">取消订单</button>
          <!-- <button class='warn' size="mini" hover-class="none">确认收货</button>
          <button class='warn' size="mini" hover-class="none">去评价</button> -->
          <button class='warn' size="mini" hover-class="none">付款</button>
        </div>
      </li>
    </ul>
    <div class="tip">
      <div>您还没有相关订单</div>
      <div>快去逛逛吧</div>
    </div>
    <i-action-sheet i-class-header="cancelListClass" :visible="showCancel" :actions="cancelList" show-cancel @cancel="handleCancel" @iclick="handleClickItem" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: '0',
      showCancel: false,
      cancelList: [
        {
          name: '订单信息有误'
        },
        {
          name: '与卖家价格未协商一致'
        },
        {
          name: '不想买了'
        },
        {
          name: '其他原因'
        }
      ]
    }
  },
  mounted() {
    this.current = this.$root.$mp.query.index
  },
  methods: {
    handleChange(data) {
      this.current = data.mp.detail.key
    },
    goOrderDetails() {
      wx.navigateTo({
        url: '../orderDetails/main'
      })
    },
    handleClickItem(data) {
      console.log(this.cancelList[data.mp.detail.index])
    },
    handleCancel() {
      this.showCancel = false
    },
    cancelOrder() {
      this.showCancel = true
    },
    evaluate() {
      wx.navigateTo({
        url: '../evaluate/main'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
ul {
    padding: 18rpx;
}
.orderInfo {
    margin-bottom: 30rpx;
    padding: 30rpx;
    border: 1rpx solid #c78550;
    border-radius: 16rpx;
    .orderHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40rpx;
        .headerLeft {
            font-size: 28rpx;
            color: #333;
        }
        .headerRight {
            font-size: 24rpx;
            color: #999;
        }
    }
    .orderBody {
        padding-top: 30rpx;
        display: flex;
        height: 125rpx;
        overflow: hidden;
        img {
            width: 90rpx;
            max-height: 125rpx;
        }
        .info {
            margin-left: 30rpx;
            flex-grow: 1;
            height: 125rpx;
            .bookName {
                height: 40rpx;
                font-size: 32rpx;
                font-weight: 900;
                color: #000;
            }
            .authorName {
                display: flex;
                justify-content: space-between;
                line-height: 40rpx;
                font-size: 24rpx;
                color: #666;
            }
            .pri {
                height: 45rpx;
                vertical-align: bottom;
                & > span:first-child {
                    color: #c68452;
                    font-size: 32rpx;
                }
                & > span:last-child {
                    color: #666;
                    font-size: 24rpx;
                }
            }
        }
    }
    .orderFooter {
        padding-top: 30rpx;
        text-align: right;
        font-size: 24rpx;
        .default {
            margin-left: 18rpx;
            background-color: #fff;
        }
        .warn {
            margin-left: 18rpx;
            background-color: #c68452;
            color: #fff;
        }
    }
}
.tip {
    margin-top: 200rpx;
    text-align: center;
    line-height: 40rpx;
    font-size: 26rpx;
    color: #999;
}
</style>

